<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" />
        <style>
            html,body,div,span{padding:0;border:0;margin:0;outline:0;box-sizing:border-box;}
            body{overflow:hidden;padding:5px;}
        </style>
    </head>
    <body id="body">
        <script>
            document.addEventListener('DOMContentLoaded',function(){
                function RmainMaze(params){
                    this.name           = 'rmain-maze';
                    this.author         = 'chensuiyi';
                    this.time           = '2017.12.23';
                    this.width          = params.width || window.innerWidth - 10;
                    this.height         = params.height || window.innerHeight - 10;
                    this.level          = params.level || 2;
                    this.border         = params.border || '1px solid #000';
                    this.cellWidth      = ~~(this.width / this.level);
                    this.cellHeight     = ~~(this.height / this.level);
                }
                RmainMaze.prototype = {
                    constructor:RmainMaze,
                    init:function(){
                        this.canvas                 = document.createElement('canvas');
                        this.ctx                    = this.canvas.getContext('2d');
                        this.canvas.width           = this.width;
                        this.canvas.height          = this.height;
                        this.canvas.style.border    = this.border;
                        this.ctx.translate(-0.5,-0.5);
                        document.body.appendChild(this.canvas);
                        this.draw();
                    },
                    draw:function(){
                        for(var i = 1;i< this.level;i++){
                            this.ctx.moveTo(i * this.cellWidth,0);
                            this.ctx.lineTo(i * this.cellWidth,this.height);
                            this.ctx.moveTo(0,i * this.cellHeight);
                            this.ctx.lineTo(this.height,i * this.cellHeight);
                        }
                        this.ctx.stroke();
                    }
                }
                var myMaze = new RmainMaze({
                    level:9
                });
                myMaze.init();
                console.dir(myMaze);
            });
        </script>
    </body>
</html>